<template>
    <div>
        <div
                class="mui-numbox"
                data-numbox-step="1"
                data-numbox-min="1"
                data-numbox-max="100"
              >
                <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                <input class="mui-numbox-input" type="number" :value="goods" @change="carts" ref="number">
                <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
              </div>
    </div>
</template>
<script>
export default {
    mounted(){
      this.mui('.mui-numbox').numbox()
    },
    props:["goods","cartid"],
    methods:{
        carts(){
            // 每当数量值改变 则立即把最新的数量同步到购物车的store中覆盖之前的数据
        this.$store.commit("upcart",{
            id:this.cartid,
            cound:this.$refs.number.value
        })
        }
    }
}
</script>
<style lang="scss" scoped>
.mui-numbox{
        height: 24px;
        margin: 0px 5px;
    }
</style>
